<template>
  <DetailsFormBox :title="dataInfo?.table?.title" :type="data.type" :form="data.form" :btns="[
    {
      title: '重置',
      icon: '',
      type: '',
      click: getForm,
    },
    {
      title: '保存',
      icon: '',
      type: 'primary',
      click: (form: any) => {
        saveBtn(form)
      },
    },
  ]" :loading="data.loading" :json="dataInfo">
    <template #default="{ form }">
      <div class="m-16">
        <CellBox title="基本信息" isTop>
          <FlexBox :list="3">
            <ElFormItemBox label="设备编号" :prop="`machineCode`">
              <ElInputBox :data="form.machineCode" disabled placeholder="系统自动生成" />
            </ElFormItemBox>
            <ElFormItemBox label="机台名称" :prop="`machineName`" isRules>
              <ElInputBox :data="form" dataName="machineName" @changeBtn="(value: string, row: any) => {
                if (form.machineEquipmentList.length === 0) {
                  form.machineEquipmentList.push({
                    ...data.addMachineEquipmentList,
                    equipmentName: value,
                  })
                }
              }" />
            </ElFormItemBox>
            <ElFormItemBox label="机台类型" :prop="`machineType`">
              <ElSelectBox :data="form" dataName="machineType" :options="data.machineType" />
            </ElFormItemBox>
            <ElFormItemBox label="归属部门" :prop="`ownDepartment`">
              <ElSelectBox :data="form" dataName="ownDepartment" :options="[
                {
                  label: '生产部',
                  value: 1,
                },
                {
                  label: '检验部',
                  value: 2,
                }
              ]" />
            </ElFormItemBox>
            <ElFormItemBox label="机台排序" :prop="`machineSort`">
              <ElNumberBox :data="form" dataName="machineSort" />
            </ElFormItemBox>
            <ElFormItemBox label="机台状态" :prop="`machineState`">
              <ElSwitchBox :data="form" dataName="machineState" :inactive-value="0" :active-value="1" />
            </ElFormItemBox>
            <ElFormItemBox label="备注" :prop="`machineRemark`" class="wAuto">
              <ElInputBox :data="form" dataName="machineRemark" type="textarea" />
            </ElFormItemBox>
          </FlexBox>
        </CellBox>
        <CellBox title="设备明细" isTop>
          <TableBoxMx :data="{
            tbody: form.machineEquipmentList,
            changeBtn: (value: any, row: any) => {
              if (row.excuteAction !== 0) {
                row.excuteAction = 1
              }
            },
            thead: [
              {
                label: '设备名称',
                prop: 'equipmentName',
                align: 'center',
                width: null,
                formProp: 'machineEquipmentList',
                formType: 'text', //文件类型
              },
              {
                label: '设备型号',
                prop: 'equipmentModel',
                align: 'center',
                width: null,
                formType: 'text', //文件类型
              },
              {
                label: '设备编码',
                prop: 'equipmentNo',
                align: 'center',
                width: null,
                formType: 'text', //文件类型
              },
              {
                label: '启用状态',
                prop: 'equipmentState',
                align: 'center',
                width: 160,
                formType: 'switch',//文件类型
                formBind: {
                  'active-value': 1,
                  'inactive-value': 0,
                }
              }
            ],
            //操作
            operation: [
              {
                label: '删除',
                icon: 'Delete',
                click: (row: any, index: any) => {
                  row.excuteAction = 2
                  if (row.equipmentCode) {
                    data.machineEquipmentListDel.push(row)
                  }
                  form.machineEquipmentList.splice(index, 1)
                }
              }
            ],
            add: data.addMachineEquipmentList
          }">
          </TableBoxMx>
        </CellBox>
        <CellBox title="异常明细" isTop>
          <TableBoxMx :data="{
            tbody: form.machineExceptionList,
            changeBtn: (value: any, row: any) => {
              if (row.excuteAction !== 0) {
                row.excuteAction = 1
              }
            },
            thead: [
              {
                label: '异常名称',
                prop: 'exceptionName',
                formProp: 'machineExceptionList',
                align: 'center',
                width: null,
                formType: 'text', //文件类型
              },
              {
                label: '启用状态',
                prop: 'exceptionState',
                align: 'center',
                width: 160,
                formType: 'switch',//文件类型
                formBind: {
                  'active-value': 1,
                  'inactive-value': 0,
                },
              }
            ],
            //操作
            operation: [
              {
                label: '删除',
                icon: 'Delete',
                click: (row: any, index: any) => {
                  row.excuteAction = 2
                  if (row.exceptionCode) {
                    data.machineExceptionListDel.push(row)
                  }
                  form.machineExceptionList.splice(index, 1)
                }
              }
            ],
            add: {
              exceptionCode: '', // 机台异常编码，异常代码为空时就是新增，不为空时就是修改
              exceptionName: '', // 机台异常名称
              exceptionSort: 0, // 机台异常排序号
              exceptionRemark: '', // 异常备注说明
              exceptionState: 1, // 机台异常状态：1可用；0禁用
              excuteAction: 0 // 执行动作：0新增；1修改；2删除
            }
          }">
          </TableBoxMx>
        </CellBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { useListComponent } from '../pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data = reactive({
  loading: false,
  loadingMsg: '',
  type: '2',
  form: {
    machineID: 0, // 机台主键ID
    machineCode: "", // 机台编码（唯一识别码）
    machineType: "", // 机台类型代码
    machineName: "", // 机台名称
    ownDepartment: 1, // 归属部门：1生产部；2检验部
    machineSort: 0, // 机台排序号
    machineRemark: "", // 机台备注说明
    machineState: 1, // 机台状态：1可用；0禁用
    machineEquipmentList: [
      {
        equipmentCode: "", // 机台设备编码，设备代码为空时就是新增，不为空时就是修改
        equipmentName: "", // 机台设备名称
        equipmentSort: 0, // 机台设备排序号
        equipmentRemark: "", // 设备备注说明
        equipmentState: 1, // 机台设备状态：1可用；0禁用
        excuteAction: 0, // 执行动作：0新增；1修改；2删除
        equipmentModel: "", // 设备型号
        equipmentNo: "" // 设备编号
      }
    ],
    machineExceptionList: [
      {
        exceptionCode: "", // 机台异常编码，异常代码为空时就是新增，不为空时就是修改
        exceptionName: "", // 机台异常名称
        exceptionSort: 0, // 机台异常排序号
        exceptionRemark: "", // 异常备注说明
        exceptionState: 1, // 机台异常状态：1可用；0禁用
        excuteAction: 0 // 执行动作：0新增；1修改；2删除
      }
    ]
  },
  machineType: [],//生产机台类型
  machineEquipmentListDel: [],//
  machineExceptionListDel: [],//
  addMachineEquipmentList: {
    equipmentCode: '', // 机台设备编码，设备代码为空时就是新增，不为空时就是修改
    equipmentName: '', // 机台设备名称
    equipmentSort: 0, // 机台设备排序号
    equipmentRemark: '', // 设备备注说明
    equipmentState: 1, // 机台设备状态：1可用；0禁用
    excuteAction: 0, // 执行动作：0新增；1修改；2删除
    equipmentModel: '', // 设备型号
    equipmentNo: '' // 设备编号
  }
});
import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();
//获得生产机台类型列表数据
const getMachineTypeDataList = () => {
  proxy.$api.System.GetMachineTypeDataList()
    .then((res: any) => {
      data.machineType = res.map((el: any) => ({
        label: el.objectName,
        value: el.objectCode,
      }))
    })
    .catch(() => { });
}

import { sendMsg } from '@/utils/crossTagMag.ts';
const saveBtn = (form: any) => {
  let _form: any = {
    ...form,
    machineEquipmentList: form.machineEquipmentList.concat(data.machineEquipmentListDel),
    machineExceptionList: form.machineExceptionList.concat(data.machineExceptionListDel),
  }
  if (form.machineID) {
    proxy.$api.ProduceMachine.UpdateProduceMachine(_form)
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  } else {
    proxy.$api.ProduceMachine.CreateProduceMachine(_form)
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  }

  function _sun() {
    proxy.$message('保存成功')
    sendMsg('save', true);
    window.close();
  }
};
const getForm = () => {
  let _query: any = route.query
  if (_query.machineID) {
    proxy.$api.ProduceMachine.GetProduceMachineDetail({
      machineID: _query.machineID,//生产机台主键ID
    })
      .then((res: any) => {
        proxy.$message('获取成功')
        data.form = {
          ...res,
          machineEquipmentList: res.machineEquipmentList.reverse(),
          machineExceptionList: res.machineExceptionList.reverse(),
        }
      })
      .catch(() => {
      });
  }

};

onMounted(() => {
  getForm();
  getMachineTypeDataList();
});
</script>
